<template>
  <div>
    <p>toRef demo --- {{ageRef}} --- {{state.name}} {{state.age}}</p>
  </div>
</template>

<script>
import {
  ref,
  toRef,
  reactive
} from 'vue'
export default {
  name: 'ToRef',
  setup() {
    const state = reactive({
      age: 20,
      name: 'cheng'
    })

    // toRef 如果用于普通的对象（非响应式对象），产出的结果不具备有响应式
    // const state = {
    //   age: 20,
    //   name: 'cheng'
    // }

    // 普通的对象实现响应式使用reactive ,一个对象里面的其中一个属性，想实现响应式，那么就
    // 使用 toRef
    const ageRef = toRef(state, 'age')

    setTimeout(() => {
      state.age = 25
    }, 1500)

    setTimeout(() => {
      ageRef.value = 30 // .value 修改值
    }, 5000)

    return {
      ageRef,
      state
    }
  }
}
</script>